<template >
  <div class="root">
    <div class="assignmentinfo">
      <div class="info-left">
        <van-icon @click="$router.back(-1)" name="revoke" />
        <div>{{ form.work_title }}</div>
      </div>

      <div class="info-right">
        <div>截止时间：</div>
        <div>{{ form.work_endtime }}</div>
      </div>
    </div>
    <div class="pl-10 pr-10">
      <van-tag plain type="primary">题目:</van-tag>
      <div class="photobox">
        <!-- <img :src="" /> -->
        <div class="describe" >{{form.work_content}}</div>
        <img class="photo" v-if="imgArr"  @click="amplify" :src="imgArr[0]" />
      </div>
      <van-tag plain type="primary">我的提交:</van-tag>

      <textarea
        class="textanwser"
        cols="30"
        rows="10"
        placeholder=" 文本输入："
        v-model="form.sub_content"
      ></textarea>

      <van-tag plain type="primary">文件上传</van-tag>
      <div class="fileanwser">
        <van-uploader
          multiple
          :max-count="2"
          max-size="500 * 1024"
          @oversize="onOversize"
          v-model="fileList"
          :after-read="afterRead"
        />
      </div>

      <div class="subbtn">
        <van-button round @click="sumbitbtn" color="#7232dd" plain
          >提交</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { Dialog, ImagePreview, Notify, Toast } from "vant";

export default {
  data() {
    return {
      fileList:[],
      imgArr:[],
      form: {
        work_id: "",
        work_title: "",
        work_content: "",
        work_endtime: "",
        // work_img1:"",
        // work_img2:"",
        // work_img3:"",
        cou_id: "",
        sub_content: "",
      },
      imgList:[],
    };
  },
  created() {
    // console.log(this.$route.query.work_id);
    this.load();
    // console.log(this.form.stu_id);
  },
  components: {},
  methods: {
    load() {
      request
        .get("assignDetail.php", {
          params: {
            work_id: this.$route.query.work_id,
          },
        })
        .then((res) => {
            console.log(res);
          if (res.code == "-1") {
            this.$router.push("/login");
          } else {
            // console.log(res.data[0].work_img1);
            this.form = res.data[0];

            if(res.data[0].work_img1&&res.data[0].work_img1!=''){
                this.imgArr.push(res.data[0].work_img1)
            }
             if(res.data[0].work_img2&&res.data[0].work_img2!=''){
                this.imgArr.push(res.data[0].work_img2)
            }
             if(res.data[0].work_img3&&res.data[0].work_img3!=''){
                this.imgArr.push(res.data[0].work_img3)
            }
            // console.log(this.imgArr);
            // console.log(this.form);

            // this.tableData = res.data.table;
            // this.total = parseInt(res.data.total);
          }
        });
    },

    amplify() {
      ImagePreview(
        this.imgArr
      //   [
      //   this.form.work_img1,
      //   this.form.work_img2,
      //   this.form.work_img3,
      // ]
      );
    },

    onOversize(file) {
      console.log(file);
      Toast("文件大小不能超过 500kb");
    },

    sumbitbtn() {
      // 确认弹窗
      Dialog.confirm({
        // title: "标题",
        message: "确认提交吗？",
      })
        .then(() => {
          if (this.form.sub_content == null) {
            Toast("你还没提交内容呢，请检查后在提交！");
          } else {
            this.addSubRecord();
            this.$router.back(-1);
          }
        })
        .catch(() => {
          // on cancel
          Notify({
            message: "已取消",
            color: "blue",
            background: "#ffe1e1",
            duration: 360,
          });
        });
    },

    addSubRecord() {
      request
        .post("submit.php", {
          sub_img1:this.fileList[0]?this.fileList[0].content:'',
          sub_img2:this.fileList[1]?this.fileList[1].content:'',
          stu_id: localStorage.getItem("zyh_stu_id"),
          work_id: this.form.work_id,
          sub_content: this.form.sub_content,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "-1") {
            this.$router.push("/login");
          }
        });
    },
  },
};
</script>

<style >
.assignmentinfo {
  padding: 2px;
  height: 30px;
  display: flex;
  border-bottom: 1px solid rgb(198, 195, 195);
  /* background-color: rgb(224, 191, 191); */
}
.info-left {
  display: flex;
  font-size: 20px;
  padding-top: 3px;
}
.info-left div {
  padding-left: 5px;
  color: rgb(163, 75, 40);
}
.info-right {
  position: absolute;
  right: 5px;
  font-size: 10px;
  width: 120px;
  text-align: left;
}

.van-tag {
  margin: 7px;
  margin-left: 24px;
}
.describe{
  padding:5px;
  height: 30px;
  overflow: hidden;
}

.photobox {
  box-shadow: 0px 0px 8px #888888;
  height: 230px;
  width: 300px;
  margin-left: 27px;
}

.photo {
  height: 190px;
  width: 290px;
  padding: 5px;
  object-fit: contain;
}

.textanwser {
  box-shadow: 0px 0px 8px #888888;
  height: 120px;
  width: 300px;
  margin-left: 27px;
  border: 0px;
  font-size: 12px;
}

.fileanwser {
  box-shadow: 0px 0px 2px gray;
  height: 80px;
  width: 300px;
  margin-left: 27px;
  border: 0px;
  font-size: 12px;
}

.subbtn {
  margin-top: 9px;
  height: 36px;
  text-align: center;
}
.van-button {
  font-size: 16px;
  height: 30px;
}
</style>